<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <div class="container">
      <div>
        <div id="screen"></div>
        <div id="match-button">开始匹配</div>
      </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script >
        $.ajax({
            type:'get',
            url:'/userInfo',
            success:function(body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = '玩家: ' + body.username + "分数:" +body.score
                +"<br> 比赛场次: " + body.totalCount + "获胜场数: " + body.winCount

            },
            error:function() {
                alert("获取用户信息失败!");
            }
        });


        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function() {
            console.log("onopen");
        }
        websocket.close = function() {
            console.log("onclose");
            
        }
        websocket.onerror = function() {
            console.log("onerror");
        }    
        window.onbeforeunload = function() {
            websocket.close();
        }

        websocket.onmessage = function(e) {
        console.log("onmessage");
           let resp = JSON.parse(e.data);
           let matchButton = document.querySelector('#match-button')
           if(!resp.ok) {
            console.log("游戏大厅中接收到了失败响应!" + resp.reason);
            return;
           }
           if(resp.message == 'startMatch') {
            console.log("进入匹配队列成功!");
            matchButton.innerHTML = '匹配中...(点击停止)'
           }else if(resp.message == 'stopMatch') {
            console.log("离开匹配队列成功!");
            matchButton.innerHTML = '开始匹配';
           }else if(resp.message == 'matchSuccess') {
            console.log("匹配到对手! 进入游戏房间!");
            location.replace("/game_room.html");
           }else if(resp.message == 'repeatConnection') {
            alert("当前禁止多开请使用其他账号登录!")
            location.replace("/login.html");
           }else {
            console.log("收到了非法的响应! message=" + resp.message );
            
           }
        }
        

        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function() {
            if(websocket.readyState == websocket.OPEN) {
               if(matchButton.innerHTML == '开始匹配') {
                console.log("开始匹配");
                websocket.send(JSON.stringify({
                    message: 'startMatch',
                }));
                
               }else if(matchButton.innerHTML == '匹配中...(点击停止)') {
                console.log("停止匹配");
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));
               }

            }else {
                alert("当前您的连接已经断开! 请重新连接.");
                location.replace('/login.html');
            }
        } 
    </script>

</body>
</html>